<template>
	<view class="detailbox">
		<view class="proTop">
			<view class="prouis" v-for="item in shopList" :key="item.id">
				<view class="imgsts">
					<image class="product-image" :src="imgUrl+item.pro_pic"/>
				</view>
				<view class="product-left">
					<view class="txx1"> {{item.pro_name}} </view>
					<view class="txx2">
						<text class="constx">× {{item.count}}</text>
						<text class="txtprotx">{{item.sale_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"> </view>
		<view class="paybox">
			<view class="tijbos">
				<view class="text-price">{{money}}</view>
				<view class="btncss" @click="xiadan">提交订单</view>
			</view>
		</view>
		<uni-popup ref="paypopup" type="bottom" background-color="#fff" border-radius="20px 20px 0 0">
		    <view class="logins">
		        <view class="cantxt1"> 下单支付 </view>
		        <view class="uisss1">
		            <text class="text-price">{{payinfo.money_pay}}</text>
		            <text class="text1">{{payinfo.pro_name}}</text>
		            <text class="text2">订单号:{{payinfo.bid}}</text>
		        </view>
		        <view class="btns" @click="buysure">支付</view>
		    </view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad } from '@dcloudio/uni-app';
	import { apiDosave , apiBuy , apiOrderpay } from '@/api/upapi.js';
	
	const paypopup =ref(null);
	const money =ref('');
	const mid =ref('');
	const dinType= ref(2);
	const xwmemberInfo = ref({});
	const payinfo= ref({});
	const memberId=ref('');
	const imgUrl = ref('https://i.73cc.com:9555/unipay/upload/');
	const shopList= ref([]);
	
	const xiadan = async()=>{
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0');
		const day = String(now.getDate()).padStart(2, '0');
		const hours = String(now.getHours()).padStart(2, '0');
		const minutes = String(now.getMinutes()).padStart(2, '0');
		const seconds = String(now.getSeconds()).padStart(2, '0');
		const milliseconds = String(now.getMilliseconds()).padStart(3, '0');
		const bid = `${year}${month}${day}${hours}${minutes}${seconds}${milliseconds}`;
		const idArr = [];
		const numArr = [];
		shopList.value.forEach(item => {
			idArr.push(item.id);
			numArr.push(item.count);
		});
		const ids = idArr.join(',');
		const nums = numArr.join(',');
		try {
			let res = await apiDosave({
				memberid:memberId.value,
				mid:mid.value,
				ids:ids,
				nums:nums,
				type:dinType.value,
				bid:bid
			});
			if(res.data.result==0){
				paypopup.value.open();
				payinfo.value= res.data.object;
			}else{
				uni.showToast({ title:res.data.msg,icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const buysure  = async () => {
		console.log('1========',xwmemberInfo.value.ali_uId);
		try {
			let res = await apiBuy({
				memberId: memberId.value,
				merchantId:mid.value,
				type:5,
				bid:payinfo.value.bid,
				openid:xwmemberInfo.value.ali_uId
			});
			console.log('tradeNO1=======',res);
			if(res.data.result==0){
				const orderno =  JSON.parse(res.data.object);
				my.tradePay ({
					tradeNO: orderno.tradeNO,
					success: res => {
						if(res.resultCode=="9000"){
							uni.showToast({ title: '支付成功', icon: 'none' });
							paypopup.value.close();
							setTimeout(function() { uni.navigateBack(1) }, 800);
						}else{
							uni.showToast({ title: '支付失败', icon: 'none' });
							paypopup.value.close();
							setTimeout(function() { uni.navigateBack(1) }, 800);
						}
					},
					fail: error => {
						console.error('调用 my.tradePay 失败: ', JSON.stringify(error));
					},
				});
			}else{
				uni.showToast({ title:res.data.msg,icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	
	onLoad((option) => {
		console.log('oooo===',option);
		money.value=option.money;
		mid.value=option.mids;
		shopList.value=JSON.parse(option.data);
		memberId.value = uni.getStorageSync('xwmemberId');
		xwmemberInfo.value = uni.getStorageSync('xwmemberInfo');
	});
</script>

<style scoped lang="scss">
	.detailbox{
	    padding: 20rpx;
	}
	.proTop{
	    background-color: #fff;
	    padding: 20rpx 20rpx 0;
	    border-radius: 20rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	.imgsts{
	    width: 26%;
	}
	.prouis{
	    display: flex;
	    width: 100%;
	    align-items: center;
	    margin-bottom: 20rpx;
	}
	.product-image {
	    width: 160rpx;
	    height: 160rpx;
	    border-radius: 16rpx;
	    background-color: #f1f6f3;
	}
	.product-left{
	    display: flex;
	    flex-direction: column;
	    height: 160rpx;
	    width: 74%;
	    justify-content: space-between;
	}
	.txx1{
	    font-size: 28rpx;
	    color: #616161;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.txx2{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
		.constx{
			font-size: 26rpx;
			color: #737373;
		}
		.txtprotx{
			color: #ff4a82;
			font-size: 32rpx;
			font-weight: bolder;
		}
		.txtprotx::before {
			content: '￥';
			color: #ff4a82 !important;
			font-size: 24rpx !important;
			font-weight: normal !important;
		}
	}
	.paybox{
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 0;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		.tijbos{
			margin: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text-price {
				color: #ff4a82;
				font-size: 55rpx;
				font-weight: bolder;
			}
			
			.text-price::before {
				content: '￥';
				color: #ff4a82 !important;
				font-size: 26rpx !important;
				font-weight: normal !important;
			}
			.btncss{
				background-color: #ff4a82;
				padding: 20rpx 50rpx;
				font-size: 28rpx;
				border-radius: 60rpx;
				color: #fff;
			}
		}
	}
	.logins{
		background-color: #fff;
		padding: 30rpx 30rpx 120rpx;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		flex-direction: column;
		.cantxt{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #ececec;
		}
		.cantxt1{
			text-align: center;
			font-size: 28rpx;
			color: #646464;
		}
		.uisss1{
			margin: 60rpx 0 200rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.text-price {
				color: #ff4a82;
				font-size: 60rpx;
				font-weight: bolder;
			}
			
			.text-price::before {
				content: '￥';
				color: #ff4a82 !important;
				font-size: 26rpx !important;
			}
			.text1{
				margin: 10rpx 0;
				font-size: 26rpx;
				color: #646464;
			}
			.text2{
				font-size: 26rpx;
				color: #646464;
			}
		}
		.btns{
			background-color: #ff4a82;
			padding: 30rpx ;
			color: #fff;
			text-align: center;
			border-radius: 100rpx;
		}
	}
</style>